<template>
  <div class="flex flex-col items-center justify-center h-full">
    <van-loading color="#436BFF" class="mb-2" />
    <div class="loading-text">
      {{ currentTip }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";

const tips = [
  "正在为您准备数据...",
  "马上就好，再等一下下~",
  "我们在努力加载中...",
  "喝杯咖啡，休息一下？☕",
];

const currentTip = ref(tips[0]);
let tipInterval: NodeJS.Timer;

onMounted(() => {
  let index = 0;
  tipInterval = setInterval(() => {
    index = (index + 1) % tips.length;
    currentTip.value = tips[index];
  }, 3000);
});

onBeforeUnmount(() => {
  clearInterval(tipInterval);
});
</script>

<style scoped lang="less">

.loading-text {
  font-size: 16px;
  color: #666;
  animation: fadeInOut 3s infinite;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
